<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Martin Debug Page with MapLibre</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src='https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js'></script>
  <link href='https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css' rel='stylesheet' />

  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>

  <script>
    const map = new maplibregl.Map({
      container: 'map',
      style: 'https://demotiles.maplibre.org/style.json',
      zoom: 0,
      center: [0, 0]
    });

    map.on('load', function () {
      map.addSource('rpc', {
        type: 'vector',
        url: `http://localhost:3000/function_zxy_query`
      });

      map.addLayer({
        id: 'points',
        type: 'circle',
        source: 'rpc',
        'source-layer': 'function_zxy_query',
        paint: {
          'circle-color': 'blue'
        }
      });
    });
  </script>
</body>

</html>
